<template>
    <div class="tree-container">
    <SysDialog
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @on-close="onClose"
    @on-confirm="commit"
    >
    <template v-slot:content>
        
<el-tree style="overflow-y: auto "
ref="treeRef"
node-key="menuId"
show-checkbox 
default-expand-all
:default-checked-keys="assignTreeData.assignTreeChecked" 
:data="assignTreeData.list" 
:props="defaultProps" >
</el-tree>

    </template>

    </SysDialog>
</div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import { getAssignTreeApi } from '../../api/user';
import SysDialog from '../../components/SysDialog.vue';
import useDialog from '../../hooks/useDialog';
import {userStore} from '../../store/user/index.ts'
import {saveRoleMenuApi} from '../../api/role/index.ts'
import { ElMessage } from 'element-plus';
import { ElTree } from 'element-plus';
const treeRef = ref<InstanceType<typeof ElTree>>()
const store = userStore()
const {dialog,onClose,onShow} =useDialog()
//树的属性配置
const defaultProps = {
    children:'children',
    label:'title'
}
//树数据
const assignTreeData = reactive({
list:[],
assignTreeChecked:[]
})
//树数据查询参数
const parms = reactive({
    userId:'',
    roleId:''
})
const checked = (id:number,data:any,newArr:any) =>{
    data.forEach((item:any) => {
        if(item.menuId == id){
            if(item.children && item.children.length == 0){
            newArr.push(item.menuId)
            }
        }else{
            if(item.children && item.children.length != 0){
                checked(id,item.children,newArr)
            }
        }
        
    });
}
//查询菜单树
const getAssignTree = async()=>{
    let res = await getAssignTreeApi(parms)
    if(res && res.code == 200){
        assignTreeData.list = res.data.menuList
        assignTreeData.assignTreeChecked = res.data.checkList
        if(assignTreeData.assignTreeChecked.length >0){
            let newArr:any = []
            assignTreeData.assignTreeChecked.forEach((item=>{
                checked(item,assignTreeData.list,newArr)
            }))
            assignTreeData.assignTreeChecked = newArr
        }
    }
}
//提交数据
const commitParm = reactive({
    roleId:'',
    list:[] as string[]
})
//弹框显示
const show = (roleId:string,name:string) =>{
    commitParm.roleId = roleId
    assignTreeData.assignTreeChecked=[]
    assignTreeData.list=[]
    commitParm.list=[]
    parms.roleId = roleId;
    parms.userId = store.getUserId
    dialog.height = 500;
    dialog.width = 300;
    dialog.title = '为【'+name+'】分配菜单';
    getAssignTree()
    onShow()
}

const commit =async()=>{
    //获取选择的菜单数据
    console.log(treeRef.value?.getCheckedKeys())
    console.log(treeRef.value?.getHalfCheckedKeys())
    const checkIds = treeRef.value?.getCheckedKeys() as string[]
    const halfcheckIds = treeRef.value?.getHalfCheckedKeys() as string[]
    let ids = checkIds.concat(halfcheckIds)
    commitParm.list = ids
let res = await saveRoleMenuApi(commitParm);
//判断是否已选择菜单
if(ids.length == 0){
    ElMessage.warning("请选择菜单")
    return;
}
if(res && res.code == 200){
    ElMessage.success(res.msg)
    onClose()
}
}
//暴露给外部组件使用
defineExpose({
    show
})
</script>

<style lang="scss" scoped>
.tree-container {
  height: calc(70vh - 100px);  /* 动态高度，减去弹框标题和按钮区域 */
  overflow-y: auto;            /* 允许滚动 */
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background: #fff;

  /* 优化树样式 */
  :deep(.el-tree) {
    min-width: 100%;  /* 确保树撑满容器 */
  }

  /* 选中样式优化 */
  :deep(.el-tree-node__content:hover) {
    background-color: #f5f7fa;
  }

  :deep(.el-tree-node.is-checked > .el-tree-node__content) {
    background-color: #f0f7ff;
  }
}

</style>